<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model的修饰符</title>
</head>
<body>
<div id="app">
  <!--1、.lazy修饰符：页面响应懒加载，只有在元素对象失去焦点时或按回车后才会对值做出反应-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>

  <!--2、.number修饰符：v-model默认的值都是字符串string类型，有些字段需要数字类型，可以用number修饰符-->
  <input type="number" v-model.number="age">
  <h2>{{age}} 类型为：{{typeof age}}</h2>

  <!--3、.trim修饰符:自动去除用户输入的字符串前后空格-->
  <input type="text" v-model.trim="name">

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue',
      age: 0,
      name: ''
    }
  });
</script>
</body>
</html>
